<template>
  <a-card size="small" :title="group.groupTxt" style="margin-top: 10px">
    <template #extra>
      <a-dropdown>
        <template #overlay>
          <a-menu>
            <template v-for="(chart, index) in group.charts" :key="index">
              <a-menu-item @click="details(chart.head.id)">{{ chart.head.name }}</a-menu-item>
            </template>
          </a-menu>
          <a-button type="primary" size="small" class="ant-btn-background-ghost" ignore-print="true" @click="details(chart.head.id)"
            >详情<a-icon type="down"
          /></a-button>
        </template>
      </a-dropdown>
    </template>
    <a-row :gutter="[16, 16]">
      <template v-for="(chart, index2) in group.charts" :key="index2">
        <a-col :xl="getGroupGrid(chart).xl" :lg="getGroupGrid(chart).lg" :md="getGroupGrid(chart).md" :sm="getGroupGrid(chart).sm">
          <group-auto-chart :title="true" :propsChartData="chart" />
        </a-col>
        <!-- 测试没问题 这个组件可以删掉GridGraphreportAutoChart -->
        <!-- <grid-graphreport-auto-chart :key="index2" :propsChartData="chart" ></grid-graphreport-auto-chart> -->
      </template>
    </a-row>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import GroupAutoChart from './GroupAutoChart.vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'GroupTemplateGrid',
    components: {
      GroupAutoChart,
    },
    props: {
      group: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props, { emit }) {
      const router = useRouter();
      function details(id) {
        router.push({ path: '/online/graphreport/chart/' + id });
      }
      function getGroupGrid(chartData) {
        return chartData.param.groupGrid ? JSON.parse(chartData.param.groupGrid) : {};
      }
      return { details, getGroupGrid };
    },
  });
</script>
<style scoped></style>
